<!DOCTYPE html>
<html lang="en">
<head>
    <title>CITY主页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style type="text/css">
        #manage,#add{
            float: left;
        }
    </style>
</head>
<body>
<hr>

<div id="cityapp" class="container">
    <h2 id="manage" >地址管理</h2>
    <div id="add" style="padding-left: 50px;padding-top: 20px">
        <button class="btn btn-default" type="button" @click="addModal()">新增</button>
    </div>
    <br>
    <table class="table" width="800px">
        <tr class="row">
            <th>城市编号</th>
            <th>城市名</th>
            <th>城市等级</th>
            <th>操作</th>
        </tr>
        <tr v-for="city in cities" class="row">
            <th>{{city.id}}</th>
            <th>{{city.name}}</th>
            <th>{{city.pid}}</th>
            <th>
                <button class="btn btn-default" type="button" @click="updateModal(city.id)">修改</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-default" type="button" @click="deleteCity(city.id)">删除</button>
            </th>
        </tr>
    </table>

    <div style="text-align: center">
        <ul class="pagination">
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(0)">上页</span>
            </li>
            <li class="page-item ">
                <span  class="page-link" >第{{page}}页</span>
            </li>
            <li class="page-item ">
                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(-1)">下页</span>
            </li>
        </ul>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModallable">ADDCITY</h4>
                </div>
                <form @submit.prevent="addCity()">
                    <div class="modal-body">
                        <input type="hidden" name="id" v-model="addcity.id">
                        <div class="form-group">
                            <label class="control-label">NAME:</label>
                            <input type="text" class="form-control" name="name" v-model="addcity.name">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PID:</label>
                            <input class="form-control" name="pid" v-model="addcity.pid"></input>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">UPDATECITY </h4>
                </div>
                <form @submit.prevent="updateCity()" >
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">ID:</label>
                            <input type="text" class="form-control" readonly="readonly" name="id" v-model="upcity.id">
                        </div>
                        <div class="form-group">
                            <label class="control-label">NAME:</label>
                            <input type="text" class="form-control" name="name" v-model="upcity.name">
                        </div>
                        <div class="form-group">
                            <label class="control-label">PID:</label>
                            <input class="form-control" name="pid" v-model="upcity.pid"></input>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="提交"></input>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script>
    var div1 = new Vue({
            el: '#cityapp',
            data: {
                page: 1,
                pages: 0,
                cities: [],
                addcity: {},
                upcity: {id:0,name:'',pid:0}
            },
            methods: {
                addModal: function () {
                    $("#addModal").modal('show');
                },
                updateModal: function (id) {
                    for (let x of this.cities) {
                        if (x.id == id) {
                            this.upcity.id = x.id;
                            this.upcity.name = x.name;
                            this.upcity.pid = x.pid;
                        }
                    }
                    $("#updateModal").modal('show');
                },
                updateCity: function () {
                    $.ajax({
                        url: '/update',
                        type: 'PUT',
                        data: JSON.stringify(div1.upcity),
                        contentType: 'application/json',
                        success: function (res) {
                            for (let x of div1.cities) {
                                if (x.id == res.id) {
                                    x.name=div1.upcity.name;
                                    x.pid=div1.upcity.pid;
                                }
                            }
                            $("#updateModal").modal('hide');
                        }
                    })
                },
                addCity: function () {
                    $.ajax({
                        url: '/add',
                        type: 'POST',
                        data: JSON.stringify(div1.addcity),
                        contentType: 'application/json',
                        success: function (data) {
                            div1.cities.push(data);
                            $("#addModal").modal('hide');
                        }
                    })
                },
                deleteCity:function (id){
                    alert("确定删除吗？");
                    $.ajax({
                        url: '/del'+id,
                        type: 'DELETE',
                        success: function (data) {
                            for (var i = 0; i < div1.cities.length; i++) {
                                if (div1.cities[i].id == id) {
                                    div1.cities.splice(i, 1)
                                }
                            }
                        }
                    })
                },
                changePage: function (flag) {
                    if (this.page < this.pages && flag == -1) {
                        this.page = this.page + 1;
                    } else if (this.page > 1 && flag == 0) {
                        this.page = this.page - 1;
                    }
                    $.ajax({
                        url: '/List',
                        data: {page: div1.page},
                        type: 'get',
                        dataType: 'json',
                        success: function (data) {
                            div1.cities = data.list;
                            div1.page = data.pageNum;
                        }
                    })
                }
            }
        }
    );
    $(function () {
        $.ajax({
            url: '/List',
            type: 'GET',
            success: function (data) {
                div1.cities = data.list;
                div1.pages=data.pages;
            }
        })
    })
</script>
</body>
</html>
